<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示所有的电影信息</title>
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
  <script src="/layui/layui.js"></script>
</head>
<form class="layui-form" action=""  id="saveFilmForm" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">电影名称</label>
        <div class="layui-input-block">
            <input type="text" name="filmName" required  lay-verify="required" placeholder="请输入电影名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电影类型</label>
        <div class="layui-input-block">
            <select name="filmType" lay-verify="required" id="typeSelect">
             <!--   <option value=""></option>
                <option value="1">剧情</option>
                <option value="2">喜剧</option>
                <option value="3">动作</option>
                <option value="4">爱情</option>-->
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">电影时长</label>
        <div class="layui-input-block">
            <input type="text" name="filmDuration" required  lay-verify="required" placeholder="请输入电影时长" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上映时间</label>
        <div class="layui-input-block">
            <input type="text" name="releaseDate" class="layui-input" id="test1">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea name="filmRemark" placeholder="请输入备注" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formSaveFilm">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<body>

<button class="layui-btn" id="addFilmBtn" >添加电影</button>
<table id="demo" lay-filter="test"></table>
</body>
<script>
  layui.use(['table','laydate','jquery', 'layer', 'form'], function(){
    var table = layui.table;
    var laydate = layui.laydate;
    var $ = layui.jquery;
      var layer = layui.layer;
      var form = layui.form;
    laydate.render({
          elem: '#test1' //指定元素
      });

    //第一个实例
    table.render({
      elem: '#demo'
      ,height: 500
      ,url: '/filmInfo' //数据接口
        ,parseData: function(res){ // 将原始数据解析成 table 组件所规定的数据
            return {
                "code": 0, // 解析接口状态
                "msg": "", // 解析提示文本
                "count": res.totalElements, // 解析数据长度
                "data": res.content // 解析数据列表
            };
        }
        ,page: true //开启分页
      ,cols: [[ //表头
        {field: 'filmId', title: '电影编号', width:80, sort: true, fixed: 'left'}
        ,{field: 'filmName', title: '名称', width:120}
        ,{field: 'filmType', title: '类型', width:80, sort: true}
        ,{field: 'filmDuration', title: '时长', width:80}
        ,{field: 'releaseDate', title: '上映时间', width: 150}
        ,{field: 'filmRemark', title: '备注', width: 400}
      ]]
    });
    document.getElementById('addFilmBtn').addEventListener('click', function(){
          layer.open({
              type: 1,
              title: '添加电影',
              area: ['500px', '550px'],
              content: $('#saveFilmForm'),
          });
        //填充类型下拉框typeSelect
        $.ajax({
            url:"/typeInfo",
            type:"GET",
            dataType:"JSON",
            success:function (ret) {
                if(ret.totalElements>0){
                    //<option value="0">写作</option>
                    var htmlStr="";
                    for (let i = 0; i < ret.content.length; i++) {
                        htmlStr+="<option value="+ret.content[i].typeId+">"+ret.content[i].typeName+"</option>"
                    }
                    $("#typeSelect").html(htmlStr);
                    //重新渲染表单
                    layui.use('form',function () {
                        var form=  layui.form;
                        form.render('select');
                    })
                }
            }
        });
      });
    form.on('submit(formSaveFilm)', function(data){
          console.log(data.field);
          $.ajax({
              url: '/filmInfo', // 提交地址
              type: 'POST',
              data: data.field,//获取表单的所有数据
              success: function(res){
                  if(res.filmId > 0){
                      layer.closeAll();//关闭对话框
                      layer.msg('添加成功');
                      table.reload('demo'); // 重新加载表格数据
                  } else {
                      layer.msg('添加失败: ' + res.msg);
                  }
              },
              error: function(){
                  layer.msg('请求失败');
              }
          });
          return false; // 阻止表单跳转
      });

  });
</script>
</html>
